<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;min-height: 100vh;overflow-y: scroll;">
			<view class="top_bg" style="overflow-x: auto;">
				<view class="" style="display: grid;">
					<view class="info_bg" @click="infoClick()">
						<view class="info" style="display: flex;">
							<image :src="userId == '-1' ? defaultHeadImg : myInfo.img"
								style="margin:30rpx 30rpx;width: 100rpx;height: 100rpx;border-radius: 50%;">
							</image>
							<view style="display: grid;margin-top: 40rpx;height: 60px;">
								<view style="color: #1F2642;font-size: 16px;;height: 20px;font-weight: 600;">
									{{userId == '-1' ? '点击登录账号':myInfo.name}}
								</view>
								<view style="color: #6D6D6D;font-size: 12px;height: 24px;">
									{{userId == '-1' ? '个性签名':(myInfo.isVip == false ? '你还不是会员，开通尊享各项权益' :myInfo.expire_date)}}
								</view>
							</view>
						</view>
					</view>
					<!-- <uni-notice-bar text="这是一条滚动公告，可用于跑马灯效果。" scrollable :speed="100" @click="handleClick" /> -->
					<view
						style="overflow-x: auto;margin-top: 10rpx;width: 100%;height: 100%;background-color: white;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<view style="">
							<scroll-view class="member" scroll-x="true" scroll-left="20">
								<view v-for="(item,index) in vipMenus" :key="index" class="item"
									style="margin: 20rpx 10rpx;border-radius: 16px;" @click="selectedMember(index)"
									:class="selectedIndex == index ? 'selectedClass' : 'noselectedClass'">

									<view style="display: table;text-align: center;width: 100%;">
										<view v-show="item.tuijian == '1'" class="tuijianlabel">推荐</view>
										<view v-show="item.price == '1999'" class="xingjiabilabel">性价比最高</view>

										<view
											:style="item.tuijian == '1' || item.price == '1999' ? 'margin-top: 10px': 'margin-top: 23px' "
											style="text-align: center;color: #1F2642 ;font-size: 30rpx;font-weight: 550;">
											{{item.vip_name}}
										</view>
										<view style="display: flex;width: 100%;justify-content: center;">
											<view :class="selectedIndex == index ? 's_priceColor':'n_priceColor'"
												style="font-size: 24rpx;margin-top: 10rpx;font-weight: 550;">
												¥ <span style="font-size: 42rpx;margin-top: 20px;font-weight: 600;">
													{{item.activity_price}}
												</span></view>
										</view>

										<view style="text-align: center;margin-top: 7px;font-size: 12px;"
											v-if="  item.describe == '1'  ">
											{{item.vip_desc}}
										</view>
										<view
											style="text-align: center;margin-top: 7px;text-decoration:line-through;color:#9D9D9D;font-size: 12px;"
											v-else>
											{{'￥' + item.price}}
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="buyBtn" style="text-align: center;" @click="goBuy()">
								{{myInfo.isVip == false ? '立即购买' :'立即续费'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 10rpx 20rpx;border-radius: 30rpx;width: calc(100% - 40rpx);">
				<view v-for="(item,index) in introImages" style="margin-top: -30rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
							<image :src="lookMore" style="width: 160rpx;" mode="widthFix" v-if="index == 0"
								class="lookmore"></image>

						</view>

						<view v-if="index == 0"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 130rpx;">

							<view class="zhuanshu-container">
								<image v-for="(zz,k) in zhuanshuImages" :src="zz" mode="widthFix">
								</image>
							</view>
						</view>

						<view v-if="index == 1"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">

							<view class="image-container">
								<image v-for="(url,i) in quanyiImages" :src="url" mode="widthFix">
								</image>
							</view>
						</view>
						<view v-if="index == 2"
							style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">

							<view class="image-container">
								<image v-for="(purl,j) in plusImages" :src="purl" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 400rpx;">
			</view>
		</view>

		<view v-show="scrollDistance > 300"
			style="position: fixed;bottom: 0;left:0;overflow-x: auto;width: 100%;height: 410rpx;background-color: white;">
			<view style="">
				<view style="width: 100%;height: 60rpx;text-align: center;" @click="backToTop()">
					<image style="width: 40rpx;height: 40rpx;margin-top: 10rpx;"
						src="../../static/images/app_member/arrowUp.png" alt="" />
				</view>
				<scroll-view class="member1" scroll-x="true" scroll-left="20">
					<view v-for="(item,index) in vipMenus" :key="index" class="item1"
						style="margin: 20rpx 10rpx;border-radius: 16px;" @click="selectedMember(index)"
						:class="selectedIndex == index ? 'selectedClass' : 'noselectedClass'">

						<view style="display: table;text-align: center;width: 100%;">
							<view v-show="item.tuijian == '1'" class="tuijianlabel">推荐</view>
							<view v-show="item.price == '1999'" class="xingjiabilabel">性价比最高</view>
							<view
								:style="item.tuijian == '1' || item.price == '1999' ? 'margin-top: 10px': 'margin-top: 23px' "
								style="text-align: center;color: #1F2642 ;font-size: 30rpx;font-weight: 550;">
								{{item.vip_name}}
							</view>
							<view style="display: flex;width: 100%;justify-content: center;">
								<view :class="selectedIndex == index ? 's_priceColor':'n_priceColor'"
									style="font-size: 24rpx;margin-top: 10rpx;font-weight: 550;">
									¥ <span style="font-size: 42rpx;margin-top: 20px;font-weight: 600;">
										{{item.activity_price}}
									</span></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="buyBtn1" style="text-align: center;" @click="goBuy()">
					{{myInfo.isVip == false ? '立即购买' :'立即续费'}}
				</view>
			</view>
		</view>
		<loginApp :isUp="isUp" @closePop="handleClose" @loginWithData="handleLogin"></loginApp>
	</view>
</template>
<script>
	const app = getApp();
	import {
		getMyHome,
		getVipTypeList,
		getVipRenewStatus,
		addClickRecord,
		getWechatURLLink,
		sendSecuritycode
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'

	import loginApp from './components/loginApp.vue';
	export default {
		components: {
			loginApp
		},
		data() {
			return {
				isUp: false,
				defaultHeadImg: 'https://pic.mae.vip//crmebimage/public/maintain/2024/08/19/aa74b0d66f4543bb9da6d4a89f6c7623a1s5jva2zj.png',
				myInfo: {},
				vipMenus: [],
				selectedIndex: 0,
				zhuanshuImages: ['../../static/images/app_newMember/zhuanshu_01.png',
					'../../static/images/app_newMember/zhuanshu_02.png',
					'../../static/images/app_newMember/zhuanshu_03.png'
				],
				introImages: ['../../static/images/app_newMember/v_01.jpg', '../../static/images/app_newMember/v_02.jpg',
					'../../static/images/app_newMember/v_03.jpg', '../../static/images/app_newMember/v_04.jpg'
				],
				quanyiImages: ['../../static/images/app_newMember/quanyi_01.png',
					'../../static/images/app_newMember/quanyi_02.png',
					'../../static/images/app_newMember/quanyi_03.png'
				],
				plusImages: ['../../static/images/app_newMember/plus_01.png',
					'../../static/images/app_newMember/plus_02.png',
					'../../static/images/app_newMember/plus_03.png'
				],
				lookMore: '../../static/images/app_newMember/lookmore.png',
				// phoneNumber: uni.getStorageSync('MaePhoneNumber') || '-1',
				// userId: uni.getStorageSync('MaeUserId') || '-1',
				phoneNumber: '-1',
				userId: '-1',
				token: '-1',
				source: '2',
				scrollDistance: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
			}
		},
		mounted: function() {
			let that = this;
			that.getMyHome();
			that.getVipTypeList();

			// if (that.phoneNumber != '-1') {
			// 	that.goLogin();
			// 	that.getMyHome();
			// }
			//uni.removeStorageSync('MaeUserId')
			//uni.removeStorageSync('MaePhoneNumber')
			console.log('当前保存的userId ===  ' + JSON.stringify(uni.getStorageSync('MaeUserId')))
			console.log('当前保存的phoneNumber ===  ' + JSON.stringify(uni.getStorageSync('MaePhoneNumber')))
		},
		onPageScroll(e) {
			let that = this;
			that.scrollDistance = e.scrollTop;
		},
		methods: {
			infoClick() {
				let that = this;
				if (that.userId == '-1') {
					that.isUp = true;
				}
			},
			handleClose(e) {
				let that = this;
				that.isUp = false;
			},
			handleLogin(e) {
				//接收登录之后的数据 userid token
				let that = this;
				that.isUp = false;
				console.log('接收userId' + e.userId)
				that.userId = e.userId;
				that.phoneNumber = e.phone;
				//uni.setStorageSync('MaeUserId', e.userId);
				//uni.setStorageSync('MaePhoneNumber', e.phone);

				that.goLogin();
				that.getMyHome();
			},
			goLogin() {
				let that = this;
				loginMobile({
						phone: that.phoneNumber,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			handleClick() {
				console.log('公告栏被点击');
			},
			// 返回顶部
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			handleScroll(e) {
				//console.log('scroll-view 滚动距离:', e.detail.scrollTop)
				let that = this;
				that.scrollDistance = e.detail.scrollTop;
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
			goBuy() {
				let that = this;
				if (that.userId == '-1') {
					that.isUp = true;
				} else {
					let p = {};
					p.userId = that.userId;
					p.token = that.token;
					p.platform = that.platform == 'ios' ? '苹果' : '安卓';;
					p.vipId = that.vipMenus[that.selectedIndex]
						.id;
					getVipRenewStatus(p).then(res => {
						console.log(res.code)
						console.log(res.msg)
						if (res.code == 0) {
							// uni.navigateTo({
							// 	animationType: animationType.type,
							// 	animationDuration: animationType.duration,
							// 	url: '/pages/app_orderMember/index?id=' + that.vipMenus[that.selectedIndex]
							// 		.id + '&price=' + that.vipMenus[that.selectedIndex].activity_price +
							// 		'&userId=' + that
							// 		.userId +
							// 		'&source=' + that.source,
							// })
							uni.navigateTo({
								animationType: animationType.type,
								animationDuration: animationType.duration,
								url: '/pages/CouponOrder/index?id=' + that.vipMenus[that.selectedIndex]
									.id + '&price=' + that.vipMenus[that.selectedIndex].activity_price +
									'&userId=' + that
									.userId +
									'&source=' + that.source +
									'&orderType=' + '会员',
							})
						} else {
							that.$util.Tips({
								title: res.msg
							});
						}
					})
				}
			},
			getMyHome() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getMyHome(p).then(res => {
					that.myInfo = res.data;
				})
			},
			getVipTypeList() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getVipTypeList(p).then(res => {
					that.vipMenus = [];
					that.vipMenus = res.data;

					for (let i = 0; i < that.vipMenus.length; i++) {
						if (that.vipMenus[i].tuijian == '1') {
							that.selectedIndex = i;
						}
					}

				})
			},
			selectedMember(index) {
				let that = this;
				that.selectedIndex = index;
				let type = '';
				if (that.vipMenus[index].duration == '三天') {
					type = '会员-3天体验会员';
				}
				if (that.vipMenus[index].duration == '一个月') {
					type = '会员-月会员';
				}
				if (that.vipMenus[index].duration == '三个月') {
					type = '会员-季度会员';
				}
				if (that.vipMenus[index].duration == '永久') {
					type = '会员-永久会员';
				}
				if (that.vipMenus[index].duration == '一年') {
					type = '会员-年会员';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.firstbg {
		position: relative;
		display: inline-block;
		/* 确保容器适应图片大小 */
	}

	.lookmore {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
	}

	.zhuanshu-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 0rpx;
		/* 图片之间的间距，可选 */
	}

	.zhuanshu-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.image-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 40rpx;
		/* 图片之间的间距，可选 */

	}

	.image-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.selectedClass {
		border: 2px solid #F97819;
		// border-image: linear-gradient(270deg, rgba(249, 114, 18, 1), rgba(255, 188, 32, 1)) 2 2;
		// background-image: linear-gradient(270deg, #F97212 0%, #FFBC20 100%);
		background-color: #FEF1E7;
		border-radius: 12px;
		opacity: 1;
		color: #FF3948;
	}

	.noselectedClass {
		background-color: #F8F8F8;
		border: 2px solid #FFFFFF;
		border-radius: 12px;
		opacity: 1;
		color: #FF3948;
	}

	.tuijianlabel {
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		width: 100rpx;
		background-color: #FF3948;
		border-top-left-radius: 14px;
		border-bottom-right-radius: 14px;
		height: 30rpx;
		margin-top: -1px;
	}

	.xingjiabilabel {
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		width: 140rpx;
		background-color: #FF3948;
		border-top-left-radius: 14px;
		border-bottom-right-radius: 14px;
		height: 30rpx;
		margin-top: -1px;
	}

	.s_priceColor {
		color: #FF3948;
	}

	.n_priceColor {
		color: #FF7B00;
	}

	.fuliname {
		color: #955A00;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.fulisubname {
		color: #955A00;
		font-size: 24rpx;
		font-weight: 100;
		margin-top: 0rpx;
		margin-left: 20rpx;
	}

	.fulibtnname {
		color: #6C3B00;
		font-size: 22rpx;
		margin-top: -5rpx;
		margin-left: 20rpx;
		width: 80px;
		height: 30px;
		background: linear-gradient(270deg, #F3CA5E 0%, #FFDD84 100%);
		border-radius: 24px 24px 24px 24px;
		text-align: center;
		line-height: 30px;
	}

	.fulibtnname2 {
		color: #FFFFFF;
		font-size: 22rpx;
		margin-top: 0rpx;
		margin-left: 20rpx;
		width: 80px;
		height: 30px;
		background: #EA554F;
		border-radius: 24px 24px 24px 24px;
		text-align: center;
		line-height: 30px;

	}

	.text-wrap {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: 180rpx;
	}

	.top_bg {
		width: 100%;
		height: 420rpx;
		background-image: url('~@/static/images/app_member/top_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: table;
	}

	.info_bg {
		margin: 20rpx;
		width: calc(100% - 40rpx);
		height: 160rpx;
		background-image: url('~@/static/images/app_member/info_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: grid;
	}

	.fuli1 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.fuli2 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.fuli3 {
		margin: 20rpx;
		width: 220rpx;
		height: 220rpx;
		background-image: url('~@/static/images/app_member/f3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.member {
		white-space: nowrap;
		width: 100%;
		margin-top: 10rpx;

		.item {
			width: 200rpx;
			height: 242rpx;
			display: inline-block;
			margin-right: 10rpx;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
		}
	}

	.member1 {
		white-space: nowrap;
		width: 100%;
		margin-top: 0rpx;

		.item1 {
			width: 200rpx;
			height: 200rpx;
			display: inline-block;
			margin-right: 10rpx;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
		}
	}



	.buyBtn {
		margin: 0rpx 30rpx 20rpx 30rpx;
		width: calc(100% - 60rpx);
		height: 44px;
		background: linear-gradient(90deg, #FEDE88 0%, #F2CA5B 100%);
		border-radius: 32px 32px 32px 32px;
		line-height: 44px;
		color: #653D00;
		font-size: 32rpx;
		font-weight: 600;
	}

	.buyBtn1 {
		margin: 0rpx 30rpx;
		width: calc(100% - 60rpx);
		height: 44px;
		background: linear-gradient(90deg, #FEDE88 0%, #F2CA5B 100%);
		border-radius: 32px 32px 32px 32px;
		line-height: 44px;
		color: #653D00;
		font-size: 32rpx;
		font-weight: 600;
	}

	.yuanjiao {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
</style>